<template>
	<view class="container" :style="$theme.pageStyle">
		<view class="person">


			<view class="list">
				<view class="li-text">孩子姓名</view>
				<view class="li-right">
					<input class="input" type="text" v-model="student_name" placeholder="请输入孩子姓名"
						maxlength="20"></input>
				</view>
			</view>

			<view class="">
				<view class="list">
					<view class="li-text">证件号
					</view>
					<view class="li-right">
						<input class="input" type="text" v-model="idcode" placeholder="请输入证件号" maxlength="18"></input>
					</view>
				</view>
				<p style="font-size: 12px;color: red;margin-left: 15px;">* 证件号仅购买保险使用</p>
			</view>

			<!-- <view class="list">
				<view class="li-text">性别</view>
				<view class="li-right">
					<view class="input" @click="sexPicker">
						{{gender}}
						<uni-icons type="forward" size="16" class="icon"></uni-icons>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="li-text">身高（cm）</view>
				<view class="li-right">
					<input class="input" type="number" v-model="height" placeholder="请输入孩子身高" maxlength="3"></input>
				</view>
			</view>

			<view class="list">
				<view class="li-text">体重（kg）</view>
				<view class="li-right">
					<input class="input" type="number" v-model="width" placeholder="请输入孩子体重" maxlength="2"></input>
				</view>
			</view>

			<view class="list">
				<view class="li-text">饮食禁忌</view>
				<view class="li-right">
					<input class="input" type="text" v-model="eat" placeholder="请输入,没有填无" maxlength="40"></input>
				</view>
			</view>


			<view class="list">
				<view class="li-text">药物过敏</view>
				<view class="li-right">
					<input class="input" type="text" v-model="medical" placeholder="请输入,没有填无" maxlength="40"></input>
				</view>
			</view> -->

			<view class="list">
				<view class="li-text">家长联系电话</view>
				<view class="li-right">
					<input class="input" type="number" v-model="home_phone" placeholder="请输入家长联系电话"
						maxlength="11"></input>
				</view>
			</view>

			<!-- <view class="list">
				<view class="li-text">家庭地区</view>
				<view class="li-right">
					<view class="input" @click="addPicker">
						{{province}}{{city}}{{area}}
						<uni-icons type="forward" size="16" class="icon"></uni-icons>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="li-text">家庭详细地址</view>
				<view class="li-right">
					<input class="input" type="text" v-model="address" placeholder="请输入详细地址" maxlength="40"></input>
				</view>
			</view>

			<view class="list">
				<view class="li-text">学校名称</view>
				<view class="li-right">
					<input class="input" type="text" v-model="school" placeholder="请输入学校名称" maxlength="40"></input>
				</view>
			</view>
			
			<view class="list">
				<view class="li-text">学校年级</view>
				<view class="li-right">
					<view class="input" @click="gradePicker">
						{{school_grade}}
						<uni-icons type="forward" size="16" class="icon"></uni-icons>
					</view>
				</view>
			</view>
			
			<view class="list">
				<view class="li-text">学校班级</view>
				<view class="li-right">
					<input class="input" type="text" v-model="school_class" placeholder="请输入学校班级"
						maxlength="40"></input>
				</view>
			</view> -->

			<!-- <view class="lists">
				<view class="li-texts">备注</view>
				<view class="li-rights">
					<textarea type="textarea" v-model="notes" placeholder="请输入备注"></textarea>
				</view>
			</view> -->

		</view>

		<button class="btn-submit" @tap="update" v-if="status == 1">
			<block v-if="id > 0">保存</block>
			<block v-else>新增</block>
		</button>

		<button class="btn-submit" v-else>
			<block v-if="id > 0">保存</block>
			<block v-else>新增</block>
		</button>

		<view class="zhanwei">

		</view>

		<!-- <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel" @onConfirm="onConfirm" :separ="separ"></mpvue-city-picker>


		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength"
			:pickerValueDefault="pickerValueDefault" @onConfirm="onConfirms" :pickerValueArray="sex"
			text=" "></mpvue-picker>
			
		<mpvue-picker :themeColor="themeColor" ref="gradempvuePicker" :mode="mode" :deepLength="deepLength"
				:pickerValueDefault="gradepickerValueDefault" @onConfirm="onConfirmgrade" :pickerValueArray="grade"
				text=" "></mpvue-picker> -->


	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	// import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	// import mpvuePicker from '@/components/card.vue';
	// import cityData from '@/common/jiangxin/city.data.js';
	// import areaData from '@/components/mpvue-citypicker/city-data/area.js';
	// import uniIcons from "@/components/uni-icons.vue";
	export default {
		components: {
			// mpvueCityPicker,
			// mpvuePicker,
			// uniIcons
		},
		data() {
			return {
				id: 0,
				student_name: '',
				idcode: '',
				height: '',
				width: '',
				eat: '',
				medical: '',
				home_phone: '',
				province: '',
				city: '',
				area: '选择您的地址',
				address: '',
				school: '',
				school_class: '',
				notes: '',
				status: 1,
				type: 0,
				sextype: 0,
				cityPickerValueDefault: [0, 0, 0],
				themeColor: ' #0894ec',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				gradepickerValueDefault: [0],
				separ: '',
				picker: 1,
				defaule: false,
				gender: '请选择性别',
				school_grade: '请选择年级',
				sex: [{
						id: 0,
						name: '男',
						code: 0
					},
					{
						id: 1,
						name: '女',
						code: 1
					}
				],
				grade: [
					{
						id: 0,
						name: '一年级',
						code: 0
					},
					{
						id: 1,
						name: '二年级',
					},
					{
						id: 2,
						name: '三年级',
					},
					{
						id: 3,
						name: '四年级'
					},
					{
						id: 4,
						name: '五年级'
					},
					{
						id: 5,
						name: '六年级'
					},
					{
						id: 6,
						name: '七年级'
					},
					{
						id: 7,
						name: '八年级'
					},
					{
						id: 8,
						name: '九年级'
					},
					{
						id: 9,
						name: '高一'
					},
					{
						id: 10,
						name: '高二'
					},
					{
						id: 11,
						name: '高三'
					}
				],
			};
		},
		onShow: function() {

		},
		onLoad: function(e) {
			var id = e.id;
			this.id = id;
			if (id > 0) {
				
				uni.setNavigationBarTitle({
					title: '修改营员信息'
				});

				$H.post('user/showcard', {
					'id': id
				}, {
					token: true
				}).then(res => {
					res = res.data;
					this.student_name = res.student_name;
					this.idcode = res.idcode;
					this.height = res.height;
					this.width = res.width;
					this.eat = res.eat;
					this.medical = res.medical;
					this.school = res.school;
					this.home_phone = res.home_phone;
					this.province = res.province;
					this.city = res.city;
					this.area = res.area;
					this.address = res.address;
					this.sextype = res.sex;
					this.school_class = res.school_class;
					this.school_grade = res.school_grade;
					this.notes = res.notes;
					if (res.sex == 1) {
						this.gender = '女';
					} else {
						this.gender = '男';
					}
					// var list = this.mulLinkageTwoPicker;
					// for (var pid = 0; pid < list.length; pid++) {
					// 	if (list[pid].label == res.province) {
					// 		var city = list[pid].children;
					// 		for (var cid = 0; cid < city.length; cid++) {
					// 			if (city[cid].label == res.city) {
					// 				var area = this.areaList[pid][cid];
					// 				for (var aid = 0; aid < area.length; aid++) {
					// 					if (area[aid].label == res.area) {
					// 						this.cityPickerValueDefault = [pid, cid, aid];
					// 					}
					// 				}
					// 			}
					// 		}
					// 	}
					// }

				})

			} else {
				uni.setNavigationBarTitle({
					title: '新增营员信息'
				});
			}
		},
		methods: {

			onCancel(e) {
				
			},
			//性别选择
			sexPicker() {
				this.picker = 1;
				this.mode = 'selector';
				this.deepLength = 1;
				this.pickerValueDefault = [0];
				this.$refs.mpvuePicker.show();
			},
			gradePicker(){
				this.picker = 1;
				this.mode = 'selector';
				this.deepLength = 1;
				this.gradepickerValueDefault = [0];
				this.$refs.gradempvuePicker.show();
			},
			//是否设为默认
			switchChange(e) {
				var type = e.detail.value;
				this.defaule = type;
			},
			// 城市三级联动选择
			addPicker() {
				this.$refs.mpvueCityPicker.show()
			},
			//城市三级联动数据返回
			onConfirm(e) {
				this.province = e.label.province;
				this.city = e.label.city;
				this.area = e.label.area;
			},
			onConfirms(e) {
				this.gender = e.name;
				this.sextype = e.code;
			},
			onConfirmgrade(e){
				this.school_grade = e.name
			},
			update() {
				var self = this;
				//姓名位数验证
				if (self.student_name.length < 2) {
					uni.showToast({
						icon: 'none',
						title: '请输入至少两位字符的学生姓名'
					});
					return;
				}

				if (self.idcode == '') {
					uni.showToast({
						icon: 'none',
						title: '身份证号码不能为空！'
					});
					return;
				}
				//console.log(self.sextype)
				// if (self.sextype.length == 0) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '性别不能为空！'
				// 	});
				// 	return;
				// }


				// if (self.height == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '身高不能为空！'
				// 	});
				// 	return;
				// }

				// if (self.width == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '体重不能为空！'
				// 	});
				// 	return;
				// }

				// if (self.eat == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '饮食禁忌不能为空，没有填无！'
				// 	});
				// 	return;
				// }

				// if (self.medical == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '药物过敏不能为空，没有填无！'
				// 	});
				// 	return;
				// }

				// if (self.school == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '学校名字不能为空！'
				// 	});
				// 	return;
				// }
				
				if (self.home_phone == '') {
					uni.showToast({
						icon: 'none',
						title: '家长电话不能为空'
					});
					return;
				}

				// if (self.school_grade == '请选择年级') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择年级!'
				// 	});
				// 	return;
				// }

				// if (self.province == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '地址未选择'
				// 	});
				// 	return;
				// }

				// if (self.address == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '详细地址不能为空'
				// 	});
				// 	return;
				// }


				// if (self.school_class == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '班级不能为空'
				// 	});
				// 	return;
				// }

				self.status = 0;

				$H.post('user/addcard', {
					'id': self.id,
					'student_name': self.student_name,
					'idcode': self.idcode,
					// 'height': self.height,
					// 'width': self.width,
					// 'eat': self.eat,
					// 'medical': self.medical,
					'home_phone': self.home_phone,
					// 'school': self.school,
					// 'province': self.province,
					// 'city': self.city,
					// 'area': self.area,
					// 'address': self.address,
					// 'school_class': self.school_class,
					// 'school_grade': self.school_grade,
					// 'notes': self.notes,
					// 'sex': self.sextype,
				}, {
					token: true
				}).then(res => {

					uni.showToast({
						icon: 'none',
						title: res.msg
					});
					self.status = 1;
					if (res.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}


				})

			}
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>

<style lang="scss">
	.container {
		width: 100%;
	}

	.person {
		width: 100%;
	}

	.list {
		display: flex;
		height: 110upx;
		background: #FFFFFF;
		padding: 10upx 30upx;
		border-bottom: 2upx solid #F2F2F2;
	}

	.li-text {
		width: 35%;
		height: 100%;
		float: left;
		color: #8a8b99;
		font-size: 28upx;
		line-height: 110upx;
	}

	.li-right,
	.li-right1 {
		width: 65%;
		height: 100%;
		float: left;
	}

	.li-right1 {
		padding-right: 20upx;
		width: calc(65% - 180upx);
	}

	.log-right {
		width: 180upx;
		color: #f97020;
		font-size: 28upx;
		text-align: right;
		line-height: 80upx;
	}

	.li-acc {
		width: 150upx;
		height: 50upx;
		color: #FFFFFF;
		margin: 15upx 0;
		font-size: 28upx;
		text-align: center;
		line-height: 50upx;
		background: #f97020;
		border-radius: 25upx;

	}

	.head {
		height: 200upx;
		background: #FFFFFF;
		border-bottom: 2upx solid #F2F2F2;
	}

	.head-text {
		height: 60upx;
		color: #C8C7CC;
		font-size: 28upx;
		line-height: 60upx;
		text-align: center;
	}

	.li-img {
		width: 120upx;
		height: 120upx;
		border-radius: 60upx;
		margin: 10upx calc(50% - 60upx) 0;
	}

	.m-input-view {
		margin: 0;
		width: 100%;
		text-align: right;
	}

	.input {
		height: 100%;
		color: #808080;
		font-size: 28upx;
		text-align: right;
		line-height: 80upx;
	}

	.btn-submit {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100upx;
		font-size: 32upx;
		color: #fff;
		background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
		border-radius: 14px
	}

	.icon {
		margin-right: -20upx;
		margin-left: 20upx;
	}

	.switch {
		float: right;
		margin: 10upx 0;
	}

	.lists {
		display: flex;
		background: #FFFFFF;
		padding: 5px 16px;
		border-bottom: 1px solid #F2F2F2;

		.li-texts {
			width: 10%;
			float: left;
			color: #8a8b99;
			font-size: 15px;
			line-height: 170px;
			height: 170px;
		}

		.li-rights {
			width: 80%;
			float: left;
			border: #808080 0.5px solid;
			border-radius: 15px;
			margin: 5px;
			height: 150px;
			padding: 10px;
			overflow: hidden;
		}
	}


	.zhanwei {
		height: 50px;
	}
</style>